<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>获取地理定位信息</title>
</head>
<body>
    <h3>获得您的坐标：</h3>
    <button id="getLocation">获取坐标</button>
    <div id="locationInfo"></div>

    <script>
        const getLocationBtn = document.getElementById('getLocation');
        const locationInfo = document.getElementById('locationInfo');

        getLocationBtn.addEventListener('click', function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;
                        locationInfo.innerHTML = `Latitude: ${latitude}<br>Longitude: ${longitude}`;
                    },
                    function(error) {
                        switch(error.code) {
                            case error.PERMISSION_DENIED:
                                locationInfo.innerHTML = "用户拒绝了位置获取请求。";
                                break;
                            case error.POSITION_UNAVAILABLE:
                                locationInfo.innerHTML = "位置信息不可用。";
                                break;
                            case error.TIMEOUT:
                                locationInfo.innerHTML = "获取位置超时。";
                                break;
                            case error.UNKNOWN_ERROR:
                                locationInfo.innerHTML = "发生未知错误。";
                                break;
                        }
                    }
                );
            } else {
                locationInfo.innerHTML = "浏览器不支持地理定位。";
            }
        });
    </script>
</body>
</html>
